<template>
    <div ref="pages">
      <div class="tabview newsPageDiv">
        <Breadcrumb 
          :breadcrumbName="breadcrumbName"
          :routerLikeTo="routerLikeTo"
        />
        <div >
          <span class="news-text">{{infoData.projectName}}</span>       
          <a-divider style="margin-top:20px;margin-bottom:20px;" />      
        </div>
        <!-- <a-spin size="large" :spinning="loading" style="width:100%; text-align: center;" /> -->
          <!-- <div class="card-container">
            <a-tabs type="card">
              <a-tab-pane key="1" tab="基本信息" > -->
                <a-descriptions bordered  size="small" style="margin-top:20px;" :column="4">
                  <a-descriptions-item label="项目名称" span="4" >
                    <span class="item-content">{{infoData.projectName}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="工程进度" span="2">
                    <span class="item-content">{{infoData.gcjd}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="项目所在地" span="2">
                    <span class="item-content">{{infoData.locationProject}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="项目负责人"  span="2"> 
                   <span class="item-content">{{infoData.projectLeader}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="项目技术负责人"  span="2"> 
                   <span class="item-content">{{infoData.renXxjs}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="项目主管部门"  span="2"> 
                   <span class="item-content">{{infoData.unitXxzg}}</span>
                  </a-descriptions-item>
                   <a-descriptions-item label="批复投资（万元）" span="2"> 
                   <span class="item-content">{{infoData.replyInves}}</span>
                  </a-descriptions-item>
                   <a-descriptions-item label="建设单位"  span="2"> 
                   <span class="item-content">{{infoData.nameConstrucunit}}</span>
                  </a-descriptions-item>
                   <a-descriptions-item label="工程规模" span="2"> 
                   <span class="item-content">{{infoData.gcScale}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="计划开工日期" span="2"> 
                   <span class="item-content" v-html="infoData.timePlanwork"></span>
                  </a-descriptions-item>
                   <a-descriptions-item label="计划完工日期" span="2"> 
                   <span class="item-content" v-html="infoData.planEndwork"></span>
                  </a-descriptions-item>
                   <a-descriptions-item label="附件" span="4"> 
                    <template v-for="(item,index) in infoData.fileupload">
                      <div  :key="index" style="margin-bottom:5px;" >
                        {{item.name}}  <a @click="downloadPDf(item)">下载</a>
                      </div>
                    </template>
                    
                  </a-descriptions-item>
                </a-descriptions>
              
              <!-- </a-tab-pane>
              <a-tab-pane key="2" tab="公告发布链接">
                <p>Content of Tab Pane 2</p>
                <p>Content of Tab Pane 2</p>
                <p>Content of Tab Pane 2</p>
                 <p>Content of Tab Pane 1</p>
                <p>Content of Tab Pane 1</p>
                <p>Content of Tab Pane 1</p>
                <p>Content of Tab Pane 1</p>
                <p>Content of Tab Pane 1</p>
                <p>Content of Tab Pane 1</p>
              </a-tab-pane>
            </a-tabs>
        </div> -->
      </div>
      <!-- <footerPage :page="4" ></footerPage> -->
    </div>
</template>

<script>
// import footerPage from '../../footer/footerPage'
import Breadcrumb from "@/components/base/tools/Breadcrumb1";
import emv from "@/views/center/emptyVue.vue";
import axios from "axios";
import download from 'downloadjs'; // 引用插件
import api from '@/api/index'
  export default {
    name: "bidInfoDetail",
    inject: ["changeTab"],
    components: {
    //  footerPage,
    Breadcrumb
  },
    props: {
      page: {
        type: String,
        default: '1',
      },
    },
     data(){
      return{
        clientHeight:'',
        screenHeight:'',
        breadList: [],
        breadcrumbName:'',
        loading:true,
        id:'',
        routerLikeTo:'/center/projPublicInfoPage',
        infoData:{},
      }
      
    },
    mounted(){
      this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                       emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                });

    },
    created(){
      this.breadcrumbName = this.$route.query.breadcrumbName;
      this.id=this.$route.query.id
      this.get_bid_data();
      this.changeTab(4, "projPublicInfoPage", '<span class="tab_name">项目信息</span>');
      
    },
    methods: {
      get_bid_data(){
         api.get_basedinfo_by_id(this.id).then(res => {
              this.infoData = res;
              this.loading = false;
              let fileData = this.infoData.file
              if(fileData!=null && fileData!=""){
                this.infoData.fileupload = JSON.parse(this.infoData.file)
              }
          })
          .catch(err => {
            this.loading = false;
          });
      },
       downloadPDf(item){//http://image.cache.timepack.cn/nodejs.pdf
          // item.url = '/dli/zw/tzgg/tzgs/202009/P020200903408975158707.doc';
          download("/api"+item.path); 
          // axios.get(item.url, {
          //   responseType: 'blob', //重要
          //    headers: {
          //     "Content-Type": "multipart/form-data"
          //   }
          // }).then(response => {
          //   let farr = item.url.split('/');
          //   let fname = farr[farr.length-1];
          //   if (window.navigator.msSaveBlob) {	//IE以及IE内核的浏览器
          //     try {
          //       window.navigator.msSaveBlob(new Blob([response.data]), fname);	
          //       // window.navigator.msSaveOrOpenBlob(response, fileNm);	
          //     }catch (e) {
          //         console.log(e);
          //     }
          //   }else{
          //     const url = window.URL.createObjectURL(new Blob([response.data]));
          //     const link = document.createElement('a');
          //     link.href = url;
          //     link.setAttribute('download', fname);
          //     document.body.appendChild(link);
          //     link.click();
          //   }
            
          // })
      },
      getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}` 
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
    }

  };
</script>
<style lang="less">
.breadcrumb{
  margin-top: 20px;
}
// .card-container {
//   background: #f5f5f5;
//   overflow: hidden;
//   padding: 1px;
  .item-content{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    
  }
  .item-content-fj{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #FF0000;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item-content-fj:hover{
    color: #f50000;
    font-weight: 600;
  }
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label, .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content {
    padding: 24px 16px;
    text-align: center;;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 150px;
  }
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content{
    padding: 24px 16px;
    text-align: left;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 300px;
  }
// }
// .card-container > .ant-tabs-card > .ant-tabs-content {
//   height:auto;
//   margin-top: -16px;
// }

// .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
//   background: #fff;
//   padding: 1px;
//   padding-bottom: 24px;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar {
//   border-color: #fff;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
//   border-color: transparent;
//   background: transparent;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
//   border-color: #fff;
//   background: #fff;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
//     border-color: #fff;
//     background: #fff;
//     border-top-color: #337BD7;
//     border-radius: 0px;
//     color: #333333;
//     // font-size: 16px;
//     font-weight: bold;
//     font-family: Microsoft YaHei;
// }
// .card-container > .ant-tabs-card > .ant-tabs-tab {
//     border-color: transparent;
//     background: transparent;
//     color: #666666;
//     // font-size: 16px;
//     font-weight: 400;
//     font-family: Microsoft YaHei;
// }
</style>